<!-- 用户管理 -->
<!-- art-full-height 自动计算出页面剩余高度 -->
<!-- art-table-card 一个符合系统样式的 class，同时自动撑满剩余高度 -->
<!-- 如果你想使用 template 语法，请移步功能示例下面的高级表格示例 -->
<template>
  <div class="user-page art-full-height">
    <!-- 搜索栏 -->
    <UserSearch
      v-model:filter="defaultFilter"
      @reset="resetSearch"
      @search="handleSearch"
    />

    <ElCard class="art-table-card" shadow="never">
      <!-- 表格头部 -->
      <ArtTableHeader v-model:columns="columnChecks" @refresh="refreshAll">
        <template #left>
          <ElButton @click="showDialog('add')">新增用户</ElButton>
        </template>
      </ArtTableHeader>

      <!-- 表格 -->
      <ArtTable
        :loading="isLoading"
        :data="tableData"
        :columns="columns"
        :pagination="paginationState"
        @selection-change="handleSelectionChange"
        @pagination:size-change="onPageSizeChange"
        @pagination:current-change="onCurrentPageChange"
      >
      </ArtTable>

      <!-- 用户弹窗 -->
      <UserDialog
        v-model:visible="dialogVisible"
        :type="dialogType"
        :user-data="currentUserData"
        @submit="handleDialogSubmit"
      />
    </ElCard>
  </div>
</template>

<script setup lang="ts">
import ArtButtonTable from "@/components/core/forms/art-button-table/index.vue";
import { ACCOUNT_TABLE_DATA } from "@/mock/temp/formData";
import { ElMessageBox, ElMessage, ElTag } from "element-plus";
import { useTable } from "@/composables/useTable";
import { 
  listUser, 
  getUser, 
  addUser, 
  updateUser, 
  delUser, 
  resetUserPwd,
  changeUserStatus,
  deptTreeSelect
} from "@/api/system/user";
import UserSearch from "./modules/user-search.vue";
import UserDialog from "./modules/user-dialog.vue";

defineOptions({ name: "User" });

const { width } = useWindowSize();

// 弹窗相关
const dialogType = ref<Form.DialogType>("add");
const dialogVisible = ref(false);
const currentUserData = ref<Partial<any>>({});

// 选中行
const selectedRows = ref<any[]>([]);

// 表单搜索初始值
const defaultFilter = ref({
  name: undefined,
  level: "normal",
  date: "2025-01-05",
  daterange: ["2025-01-01", "2025-02-10"],
  status: "1",
});

// 用户状态配置
const USER_STATUS_CONFIG = {
  "1": { type: "success" as const, text: "在线" },
  "2": { type: "info" as const, text: "离线" },
  "3": { type: "warning" as const, text: "异常" },
  "4": { type: "danger" as const, text: "注销" },
} as const;

/**
 * 获取用户状态配置
 */
const getUserStatusConfig = (status: string) => {
  return (
    USER_STATUS_CONFIG[status as keyof typeof USER_STATUS_CONFIG] || {
      type: "info" as const,
      text: "未知",
    }
  );
};

const {
  columns,
  columnChecks,
  tableData,
  isLoading,
  paginationState,
  searchData,
  searchState,
  resetSearch,
  onPageSizeChange,
  onCurrentPageChange,
  refreshAll,
} = useTable<UserListItem>({
  // 核心配置
  core: {
    apiFn: listUser,
    apiParams: {
      current: 1,
      size: 20,
      ...defaultFilter.value,
      // pageNum: 1,
      // pageSize: 20
    },
    // 自定义分页字段映射，同时需要在 apiParams 中配置字段名
    // paginationKey: {
    //   current: 'pageNum',
    //   size: 'pageSize'
    // },
    columnsFactory: () => [
      { type: "selection" }, // 勾选列
      { type: "index", width: 60, label: "序号" }, // 序号
      {
        prop: "avatar",
        label: "用户名",
        minWidth: width.value < 500 ? 220 : "",
        formatter: (row) => {
          return h(
            "div",
            { class: "user", style: "display: flex; align-items: center" },
            [
              h("img", { class: "avatar", src: row.avatar }),
              h("div", {}, [
                h("p", { class: "user-name" }, row.username),
                h("p", { class: "email" }, row.userEmail),
              ]),
            ],
          );
        },
      },
      {
        prop: "userGender",
        label: "性别",
        sortable: true,
        // checked: false, // 隐藏列
        formatter: (row) => row.userGender,
      },
      { prop: "userPhone", label: "手机号" },
      {
        prop: "status",
        label: "状态",
        formatter: (row) => {
          const statusConfig = getUserStatusConfig(row.status);
          return h(ElTag, { type: statusConfig.type }, () => statusConfig.text);
        },
      },
      {
        prop: "createTime",
        label: "创建日期",
        sortable: true,
      },
      {
        prop: "operation",
        label: "操作",
        width: 120,
        fixed: "right", // 固定列
        formatter: (row) =>
          h("div", [
            h(ArtButtonTable, {
              type: "edit",
              onClick: () => showDialog("edit", row),
            }),
            h(ArtButtonTable, {
              type: "delete",
              onClick: () => deleteUser(row),
            }),
          ]),
      },
    ],
  },
  // 数据处理
  transform: {
    // 数据转换器 - 替换头像
    dataTransformer: (records: any) => {
      // 类型守卫检查
      if (!Array.isArray(records)) {
        console.warn("数据转换器: 期望数组类型，实际收到:", typeof records);
        return [];
      }

      // 使用本地头像替换接口返回的头像
      return records.map((item: any, index: number) => {
        return {
          ...item,
          avatar: ACCOUNT_TABLE_DATA[index % ACCOUNT_TABLE_DATA.length].avatar,
        };
      });
    },
  },
});

/**
 * 搜索处理
 * @param params 参数
 */
const handleSearch = (params: Record<string, any>) => {
  // 处理日期区间参数，把 daterange 转换为 startTime 和 endTime
  const { daterange, ...searchParams } = params;
  const [startTime, endTime] = Array.isArray(daterange)
    ? daterange
    : [null, null];

  // 搜索参数赋值
  Object.assign(searchState, { ...searchParams, startTime, endTime });
  searchData();
};

/**
 * 显示用户弹窗
 */
const showDialog = (type: Form.DialogType, row?: UserListItem): void => {
  console.log("打开弹窗:", { type, row });
  dialogType.value = type;
  currentUserData.value = row || {};
  nextTick(() => {
    dialogVisible.value = true;
  });
};

/**
 * 删除用户
 */
const deleteUser = (row: UserListItem): void => {
  console.log("删除用户:", row);
  ElMessageBox.confirm(`确定要注销该用户吗？`, "注销用户", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  }).then(() => {
    ElMessage.success("注销成功");
  });
};

/**
 * 处理弹窗提交事件
 */
const handleDialogSubmit = async () => {
  try {
    dialogVisible.value = false;
    currentUserData.value = {};
  } catch (error) {
    console.error("提交失败:", error);
  }
};

/**
 * 处理表格行选择变化
 */
const handleSelectionChange = (selection: UserListItem[]): void => {
  selectedRows.value = selection;
  console.log("选中行数据:", selectedRows.value);
};
</script>

<style lang="scss" scoped>
.user-page {
  :deep(.user) {
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 6px;
    }

    > div {
      margin-left: 10px;

      .user-name {
        font-weight: 500;
        color: var(--art-text-gray-800);
      }
    }
  }
}
</style>
